<template>
  <star-horse-dialog :visible = "batchDialogTableVisible" :title = "dialogTitle" is-batch = "true" @merge = "merge"
                     @mergeDraft = "mergeDraft"
                     @reset = "resetForm">
    <el-form :model = "ruleForm" :rules = "rules" class = "data-form" ref = "ruleForm">
      <el-table
          :data = "ruleForm.batchDataList"
          :row-class-name = "rowClassName"
          @selection-change = "handleDetailSelectionChange"
          border
          fit = "true"
          ref = "tb"
          v-loading = "loading"
      >
        <el-table-column align = "center" label = "序号" fixed = "left" prop = "xh" width = "80"></el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "主键"
            min-width = "200px"
            prop = "idStatusinfo"
            required
            sortable v-if = " false ">
          <template #default = "scope">
            <el-form-item required :rules = "rules.idStatusinfo"
                          :prop = "'batchDataList.'+scope.$index+'.idStatusinfo'">
              <el-input-number clearable placeholder = "请输入主键"
                               v-model = "scope.row.idStatusinfo"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "系统编号"
            min-width = "200px"
            prop = "dataNo"
            sortable
            v-if = " false ">
          <template #default = "scope">
            <el-form-item required :rules = "rules.dataNo" :prop = "'batchDataList.'+scope.$index+'.dataNo'">
              <el-input clearable placeholder = "请输入系统编号"
                        v-model = "scope.row.dataNo"></el-input>
            </el-form-item>

          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "字典名称"
            min-width = "200px"
            prop = "statusName"
            required
            sortable v-if = "true ">
          <template #default = "scope">
            <el-form-item required :rules = "rules.statusName" :prop = "'batchDataList.'+scope.$index+'.statusName'">
              <el-input clearable placeholder = "请输入字典名称"
                        v-model = "scope.row.statusName"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "字典值"
            min-width = "200px"
            prop = "statusCode"
            sortable
            v-if = " true ">
          <template #default = "scope">

            <el-form-item required :rules = "rules.statusCode" :prop = "'batchDataList.'+scope.$index+'.statusCode'">
              <el-input clearable placeholder = "请输入字典编码"
                        v-model = "scope.row.statusCode"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "字典类型"
            min-width = "200px"
            prop = "statusType"
            required
            sortable v-if = "true ">
          <template #default = "scope">

            <el-form-item required :rules = "rules.statusType" :prop = "'batchDataList.'+scope.$index+'.statusType'">
              <el-input clearable placeholder = "请输入字典类型"
                        v-model = "scope.row.statusType"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "修改人"
            min-width = "200px"
            prop = "updatedBy"
            sortable
            v-if = " false ">
          <template #default = "scope">

            <el-form-item required :rules = "rules.updatedBy" :prop = "'batchDataList.'+scope.$index+'.updatedBy'">
              <el-input clearable placeholder = "请输入修改人"
                        v-model = "scope.row.updatedBy"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "修改日期"
            min-width = "200px"
            prop = "updatedDate"
            sortable
            v-if = " false ">
          <template #default = "scope">
            <el-date-picker clearable placeholder = "请选择修改日期"
                            type = "date"
                            v-model = "batchDataList[scope.row.xh-1].updatedDate">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "创建人"
            min-width = "200px"
            prop = "createdBy"
            sortable
            v-if = " false ">
          <template #default = "scope">
            <el-input clearable placeholder = "请输入创建人"
                      v-model = "batchDataList[scope.row.xh-1].createdBy"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "创建日期"
            min-width = "200px"
            prop = "createdDate"
            sortable
            v-if = " false ">
          <template #default = "scope">
            <el-date-picker clearable placeholder = "请选择创建日期"
                            type = "date"
                            v-model = "batchDataList[scope.row.xh-1].createdDate">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "是否删除 1 是 0否"
            min-width = "200px"
            prop = "isDel"
            sortable
            v-if = " false ">
          <template #default = "scope">
            <el-input-number clearable placeholder = "请输入是否删除 1 是 0否"
                             v-model = "batchDataList[scope.row.xh-1].isDel"/>
          </template>
        </el-table-column>
        <el-table-column
            :formatter = "dataFormat"
            :show-overflow-tooltip = "true"
            label = "状态描述"
            min-width = "200px"
            prop = "statusDesc"
            required
            sortable v-if = "true ">
          <template #default = "scope">
            <el-form-item required :rules = "rules.statusDesc" :prop = "'batchDataList.'+scope.$index+'.statusDesc'">
              <el-input clearable placeholder = "请输入状态描述"
                        v-model = "scope.row.statusDesc"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed = "right" label = "操作" min-width = "150px">
          <template #header = "scope">
            <span>操作</span>&nbsp;&nbsp;
            <el-button @click = "handleAddDetails(scope.row,1)" link size = "mini" type = "primary">
              <el-tooltip content = "添加一行">
                <user-icon icon = "plus" style = "vertical-align: middle;color:#409EFF;"/>
              </el-tooltip>
            </el-button>
          </template>
          <template #default = "scope">
            <el-button v-if = "scope.row.xh==ruleForm.batchDataList.length" @click = "handleAddDetails(scope.row,1)"
                       link size = "mini" type = "primary">
              <el-tooltip content = "添加一行">添加</el-tooltip>
            </el-button>
            <el-button @click = "handleAddDetails(scope.row,2)" link size = "mini" type = "danger">
              <el-tooltip content = "删除当前行">删除</el-tooltip>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </star-horse-dialog>

  <star-horse-dialog :visible = "dialogTableVisible" :title = "dialogTitle" @merge = "merge" @mergeDraft = "mergeDraft"
                     @reset = "resetForm">

    <el-form :model = "ruleForm" :rules = "rules" class = "demo-ruleForm" ref = "ruleForm">
      <el-form-item label = "主键" prop = "idStatusinfo" v-if = "false">
        <el-input clearable placeholder = "请输入主键"
                  v-model = "ruleForm.idStatusinfo"></el-input>
      </el-form-item>

      <el-form-item label = "系统编号" prop = "dataNo"
                    v-if = "!true">
        <el-input clearable placeholder = "请输入系统编号"
                  v-model = "ruleForm.dataNo"></el-input>
      </el-form-item>

      <el-form-item label = "字典名称" prop = "statusName"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入字典名称"
                  v-model = "ruleForm.statusName"></el-input>
      </el-form-item>

      <el-form-item label = "字典值" prop = "statusCode"
                    v-if = "!false">
        <el-input clearable placeholder = "请输入字典编码"
                  v-model = "ruleForm.statusCode"></el-input>
      </el-form-item>

      <el-form-item label = "字典类型" prop = "statusType"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入字典类型"
                  v-model = "ruleForm.statusType"></el-input>
      </el-form-item>

      <el-form-item label = "修改人" prop = "updatedBy"
                    v-if = "!true">
        <el-input clearable placeholder = "请输入修改人"
                  v-model = "ruleForm.updatedBy"></el-input>
      </el-form-item>

      <el-form-item label = "修改日期" prop = "updatedDate"
                    v-if = "!true">
        <el-date-picker clearable placeholder = "请选择修改日期" type = "date"
                        v-model = "ruleForm.updatedDate">
        </el-date-picker>
      </el-form-item>

      <el-form-item label = "创建人" prop = "createdBy"
                    v-if = "!true">
        <el-input clearable placeholder = "请输入创建人"
                  v-model = "ruleForm.createdBy"></el-input>
      </el-form-item>

      <el-form-item label = "创建日期" prop = "createdDate"
                    v-if = "!true">
        <el-date-picker clearable placeholder = "请选择创建日期" type = "date"
                        v-model = "ruleForm.createdDate">
        </el-date-picker>
      </el-form-item>

      <el-form-item label = "是否删除 1 是 0否" prop = "isDel"
                    v-if = "!true">
        <el-input-number clearable placeholder = "请输入是否删除 1 是 0否"
                         v-model = "ruleForm.isDel"/>
      </el-form-item>

      <el-form-item label = "字典描述" prop = "statusDesc"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入字典描述"
                  v-model = "ruleForm.statusDesc"></el-input>
      </el-form-item>
    </el-form>
  </star-horse-dialog>
  <star-horse-dialog :visible = "viewVisible" :title = "'查看数据'" :is-view = "true">

    <div class = "item">
      <label>字典名称:</label>
      <div class = "content">{{ ruleForm.statusName }}</div>
    </div>
    <div class = "item">
      <label>字典类型:</label>
      <div class = "content">{{ ruleForm.statusType }}</div>
    </div>
    <div class = "item">
      <label>字典值:</label>
      <div class = "content">{{ ruleForm.statusCode }}</div>
    </div>
    <div class = "item">
      <label>状态描述:</label>
      <div class = "content">{{ ruleForm.statusDesc }}</div>
    </div>
    <div class = "item">
      <label>创建人:</label>
      <div class = "content">{{ ruleForm.createdBy }}</div>
    </div>
    <div class = "item">
      <label>创建日期:</label>
      <div class = "content">{{ createDate(ruleForm.createdDate) }}</div>
    </div>
  </star-horse-dialog>
  <el-card class = "inner_content">

    <el-form class = "search_area" size = "mini">
      <el-form-item label = "字典类型">
        <el-input placeholder = "请输入字典类型" v-model = "searchForm.statusType"/>
      </el-form-item>
      <el-form-item label = "字典名称">
        <el-input placeholder = "请输入字典名称" v-model = "searchForm.statusName"/>
      </el-form-item>
      <el-form-item label = "字典值">
        <el-input placeholder = "请输入字典编码" v-model = "searchForm.statusCode"/>
      </el-form-item>

      <el-form-item label = "添加时间">
        <el-date-picker
            end-placeholder = "结束日期" placeholder = "请选择添加时间"
            range-separator = "到"
            start-placeholder = "开始日期"
            type = "daterange"
            v-model = "searchForm.createdDate"
        />
      </el-form-item>
      <el-form-item label = "     ">
        <el-button @click = "dataSearch" link type = "primary">
          <user-icon icon = "search"/>
          <span style = "vertical-align: middle;"> 查询 </span>
        </el-button>
        <el-button @click = "dataSearch(1)" link small>
          <span style = "vertical-align: middle;"> 重置 </span>
        </el-button>
      </el-form-item>
    </el-form>
    <el-divider/>


    <star-horse-button-list
        :permission = "permission"
        :upload-url = "uploadUrl"
        @upload = "upload"
        @uploadProcess = "uploadProcess"
        @uploadError = "uploadError"
        @uploadSuccess = "uploadProcess"
        @btnOperation = "btnOperation"
    />
    <el-table
        :data = "dataList"
        :row-key = "getRowIdentity"
        @row-dblclick = "editData"
        @selection-change = "handleSelectionChange"
        border
        class = "data_table"
        fit = "true"
        highlight-current-row = "true"
        id = "statusinfoPo"
        ref = "multipleTable"
        stripe = "true">
      <el-table-column fixed width = "1"/>
      <el-table-column
          :reserve-selection = "true"
          align = "center"
          fixed = "left"
          type = "selection"
      />
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "主键"
          min-width = "200px"
          prop = "idStatusinfo"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "系统编号"
          min-width = "200px"
          prop = "dataNo"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "字典名称"
          min-width = "200px"
          prop = "statusName"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "字典值"
          min-width = "200px"
          prop = "statusCode"
          sortable
          v-if = " true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "字典类型"
          min-width = "200px"
          prop = "statusType"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改人"
          min-width = "200px"
          prop = "updatedBy"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改日期"
          min-width = "200px"
          prop = "updatedDate"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建人"
          min-width = "200px"
          prop = "createdBy"
          sortable
          v-if = " true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建日期"
          min-width = "200px"
          prop = "createdDate"
          sortable
          v-if = " true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "是否删除 1 是 0否"
          min-width = "200px"
          prop = "isDel"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "状态描述"
          min-width = "200px"
          prop = "statusDesc"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column fixed = "right" label = "操作" min-width = "180px">
        <template #default = "scope">
          <el-button v-if = "permission.edit" @click = "editById(scope.row[primaryKey])" link title = ""
                     type = "primary">
            <el-tooltip content = "编辑">编辑</el-tooltip>
          </el-button>
          <el-button v-if = "permission.view" @click = "viewById(scope.row[primaryKey])" link title = ""
                     type = "primary">
            <el-tooltip content = "查看">查看</el-tooltip>
          </el-button>
          <el-button v-if = "permission.delete" @click = "deleteById(scope.row[primaryKey])" link title = ""
                     type = "danger">
            <el-tooltip content = "删除">删除</el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider/>
    <el-pagination
        :total = "totalData"
        @current-change = "pageChangeClick"
        @size-change = "pageSizeClick"
        layout = "total, sizes, prev, pager, next, jumper"
        v-model:currentPage = "currentPage"
        v-model:page-size = "pageSize"
        v-model:pageCount = "totalPage"/>
  </el-card>
</template>
<style lang = "scss" scoped>
</style>
<script>
import {permissionResources, postRequest} from "../../api/star_horse";


import {common} from "../../api/common";
import {ref} from "vue";
import {error, success} from "@/utils/message";

export default {
  name: "DictinfoEntity",

  mixins: [common],
  setup() {
    return {}
  },
  data() {
    const loadByPageUrl = ref("/system-config/system/statusinfoEntity/pageList");
    const mergeUrl = ref("/system-config/system/statusinfoEntity/merge");
    const mergeDraftUrl = ref("/system-config/system/statusinfoEntity/mergeDraft");
    const batchMergeUrl = ref("/system-config/system/statusinfoEntity/mergeBatch");
    const batchMergeDraftUrl = ref("/system-config/system/statusinfoEntity/mergeBatchDraft");
    const loadByIdUrl = ref("/system-config/system/statusinfoEntity/getById");
    const deleteUrl = ref("/system-config/system/statusinfoEntity/batchDeleteById");
    const exportAllUrl = ref("/system-config/system/statusinfoEntity/exportData");
    const downloadTemplateUrl = ref("/system-config/system/statusinfoEntity/downloadTemplate");
    const uploadUrl = "/system-config/system/statusinfoEntity/importData";
    const primaryKey = "idStatusinfo";
    return {
      uploadUrl,
      loadByPageUrl,
      mergeUrl,
      mergeDraftUrl,
      batchMergeUrl,
      batchMergeDraftUrl,
      loadByIdUrl,
      deleteUrl,
      exportAllUrl,
      downloadTemplateUrl,
      primaryKey,
      statusTypeCode: "",
      rules: {
        statusName: [{required: true, message: "必选项不能为空", trigger: "blur"}],
        statusCode: [{required: true, message: "必选项不能为空", trigger: "blur"}],
        statusType: [{required: true, message: "必选项不能为空", trigger: "blur"}],
        statusDesc: [{required: true, message: "必选项不能为空", trigger: "blur"}],
      }
    }
  },
  methods: {
    handleAddDetails(row, type) {
      let _this = this;
      if (type === 1) {
        let obj = {"statusType": _this.statusTypeCode};
        _this.ruleForm["batchDataList"].push(obj);
      } else {
        _this.ruleForm["batchDataList"].splice(row.xh - 1, 1);
      }
    },
    addDataFun() {
      let _this = this;
      _this.ruleForm = {};
      _this.ruleForm["statusType"] = _this.statusTypeCode;
      _this.dialogTableVisible = !_this.dialogTableVisible;
      _this.dialogTitle = "新增数据";
    },
    batchAddDataFun() {
      let _this = this;
      _this.ruleForm = {};
      _this.ruleForm["batchDataList"] = [{"statusType": _this.statusTypeCode}];
      _this.batchDialogTableVisible = !_this.batchDialogTableVisible;
      _this.dialogTitle = "批量新增";
    },
    /**
     * 编辑保存数据
     */
    merge(isBatch) {
      if (isBatch) {
        this.batchMerge();
        return;
      }
      let that = this;
      that.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return;
        }
        that.load();
        postRequest(that.mergeUrl, that.ruleForm).then(res => {
          success(res.data.cnMessage);
          that.closeLoad();
          that.loadByPage(1, that.pageSize);
          that.ruleForm = {};
          that.ruleForm["batchDataList"] = [{}];
          that.dialogTableVisible = !that.dialogTableVisible;
        }).catch(err => {
          error("操作异常 " + err);
        }).finally(() => {
          that.closeLoad();
        })

      });
    },
    /**
     * 批量编辑保存数据
     */
    batchMerge: function () {
      let that = this;
      that.load();
      postRequest(that.batchMergeUrl, that.ruleForm["batchDataList"]).then(res => {
        success(res.data.cnMessage);
        that.closeLoad();
        that.loadByPage(1, that.pageSize);
        that.ruleForm = {};
        that.ruleForm["batchDataList"] = [{}];
        that.batchDialogTableVisible = !that.batchDialogTableVisible;
      }).catch(err => {
        error("操作异常 " + err);
      }).finally(() => {
        that.closeLoad();
      })
    },
    /**
     * 批量编辑保存草稿数据
     */
    batchMergeDraft: function () {
      let that = this;
      that.load();
      postRequest(that.batchMergeDraftUrl, that.batchDataList).then(res => {
        success(res.data.cnMessage);
        that.closeLoad();
        that.loadByPage(1, that.pageSize);
        that.ruleForm = {};
        that.ruleForm["batchDataList"] = [{}];
        that.batchDialogTableVisible = !that.batchDialogTableVisible;
      }).catch(err => {
        error("操作异常 " + err);
      }).finally(() => {
        that.closeLoad();
      })
    },
    dataFormat(row, column, cellValue, index) {
      cellValue = this.commonDataFormat(row, column, cellValue, index);
      return cellValue;
    },
    /**
     * 初始化数据
     */
    init: function () {
      this.dataList = [];
      this.selectData = [];
      this.loadByPage(this.currentPage, this.pageSize);
      this.commonSelectData("statusinfoUi");
      // this.loadPermissionResources();
      this.permission = {
        add: "add",
        edit: "edit",
        delete: "delete"
      };
    },
    loadPermissionResources() {
      let that = this;
      let meta = that.$router.currentRoute.value.meta;
      let data = {"menuId": meta.menuId};
      permissionResources(data).then(res => {
        let redata = res.data.data;
        redata.forEach(item => {
          this.permission[item.resCode] = item.resCode;
        });
      });
    },

    parseSearchData: function () {
      let _this = this;
      // let query = _this.$route.query;
      // if (query) {
      //   _this.searchForm["statusType"] = query.typeCode;
      // }
      let data = _this.searchForm;
      let arr = [];


      if (data.statusName) {
        arr.push({
          propertyName: "statusName",
          value: data.statusName,
          operation: "lk"
        });
      }
      if (data.statusType) {
        arr.push({
          propertyName: "statusType",
          value: data.statusType,
          operation: "eq"
        });
      }
      if (data.statusCode) {
        arr.push({
          propertyName: "statusCode",
          value: data.statusCode,
          operation: "lk"
        });
      }
      if (data.createdDate) {
        arr.push({
          propertyName: "createdDate",
          value: data.createdDate,
          operation: "bt"
        });
      }
      return arr;
    }
  },
  created() {
    this.init();
  },
  watch: {
    '$route.query.typeCode': {
      immediate: true,
      handler: function (nv, ov) {
        this.statusTypeCode = nv;
        this.ruleForm["statusType"] = nv;
        this.searchForm["statusType"] = nv;
        this.init();
      }
    }
  }
}
</script>